import React, { useState, useEffect } from "react";
import "../../assets/css/kehu.css";
import Qiyexinxi from "./component/qiyexinxi";
import Context from '../../assets/js/context'
import {Drawer} from 'antd'
import { FormOutlined, RightOutlined, DeleteOutlined } from "@ant-design/icons";
import {
  Input,
  Form,
  Button,
  Checkbox,
  ConfigProvider,
  Table,
  Modal,
  Col,
  Row,
  Select,
  Upload,
  message,
  DatePicker,
  Tooltip,
  Space
} from "antd";


import { UpOutlined, DownOutlined ,InboxOutlined,CloudUploadOutlined} from "@ant-design/icons";
import axios from "axios";
export default function Phone() {
 const {Option} = Select
  let [show, setShow] = useState(true);
  let [khlist, setKhlist] = useState([]);
  let [drbol, setdrbol] = useState(false);
  let [newbol, setnewbol] = useState(false);
let [khct,setKhct]=useState(false)
let [zqchangect,setZqchangect] =useState(false)
const changekhct=(e)=>{
  setKhct(khct=e)
 }
// 新建客户
let [fkhname,setfkhname]=useState('')
let [fkhstyle,setfkhstyle]=useState('')
let [fkhhy,setfkhhy]=useState('')
let [fkhyrgm,setfkhyrgm]=useState('')
let [ftelname,setftelname]=useState('')
let [ftelzw,setftelzw]=useState('')
let [ftelphone,setftelphone]=useState('')
let [ftelstyle,setftelstyle]=useState('中国+86')
let [fglystyle,setfglystyle]=useState('中国+86')
let [ftelemail,setftelemail]=useState('')
let [fglyname,setfglyname]=useState('')
let [fglyid,setfglyid]=useState('')
let [fglyphone,setfglyphone]=useState('')
let [fglyemail,setfglyemail]=useState('')
let [title, settitle] = useState(false);
let [ele,setEle] = useState({})
  let [qyshow,setQyshow] = useState(false);
  let [qyxxdel,setQyxxdel] = useState(false);
  let [xz, setXz] = useState(false);
  let [jczl,setJczl]=useState(false)
  let [zqgly,setZqgly]=useState(false)
  let [qylxr,setQylxr]=useState(false)
  let [Bxlist,setBxlist] = useState([]);
  let [Zylist,setZylist] = useState([]);


  useEffect(()=>{
    getBxList();
        getZyList();
  },[])
const addkh=()=>{
  axios.post('/api/addKh',{
    name:fkhname,
    khstyle:fkhstyle,
    hy:fkhhy,
    khgm:fkhyrgm,
    telname:ftelname,
    teljob:ftelzw,
    telstyle:ftelstyle,
    phone:ftelphone,
    email:ftelemail,
    admin:fglyname,
    adminID:fglyid,
    admintel:fglyphone,
    adminemail:fglyemail,
    glystyle:fglystyle,
  }).then(()=>{
    getKhlist()
    message.open({
      type: 'success',
      content: '添加成功',
     
    });
  })
}
//

  let khlx = [
    { value: "企业", label: "企业" },
    { value: "个人", label: "个人" },
  
 
  ];
  let khgm=[
    {value:'100',label:'100'},
    {value:'500',label:'500'},
    {value:'1000',label:'1000'},
  ]
  let khhy=[
    {value:'行业1',label:'行业1'},
    {value:'行业2',label:'行业2'},
    {value:'行业3',label:'行业3'},
   
  ]
  let phone=[
    {value:'中国+86',label:'中国+86'},
    {value:'香港+26',label:'香港+26'}
  ]
  let zqList = [
    {
      label: "有未开始的租期",
      value: "1",
    },
    {
      label: "租期进行中",
      value: "2",
    },
    {
      label: "有已结来的租期",
      value: "3",
    },
  ];
  //得到反显数据
  let [ctlist,setCtlist]=useState({})
  useEffect(() => {
    getKhlist();
  }, []);
  const getDetail = (row)=>{
    console.log(row);
    let aa = row
    setCtlist(aa)
    console.log(ctlist);
    changekhct(true) 
  }
  
 
  const columns = [
    {
      title: "客户名称",
       align:"center",
     
       render: (_,row) => {
        return (
        <span  style={{color:'#8479e3'}}
          onClick={()=>{
  
            console.log(row.khstyle,row.hy,row.khgm);
            getDetail(row)  
         
           
            
          }}
          
          >{_.name}</span>)
     
      },
    },
    {
      title: "有未开始的租期",
      dataIndex: "start",
      key: "start",
       align:"center"
    },
    {
      title: "租期进行中",
      dataIndex: "doing",
      key: "doing",
       align:"center"
    },
    {
      title: "有已结束的租期",
      dataIndex: "end",
      key: "end",
       align:"center"
    },

    {
      title: "曾驻最大面积（㎡）",
      dataIndex: "V2",
      key: "V2",
       align:"center"
    },
    {
      title: "已驻天数（天）",
      dataIndex: "stop",
      key: "stop",
       align:"center"
    },
    {
      title: "待驻天数（天）",
      dataIndex: "staystop",
      key: "staystop",
     align:"center"
    },
  ];
  const getKhlist = () => {
    axios.get("/api/getKhList").then((res) => {
      setKhlist([...res.data]);
    });
  };

  const upload={
    name: 'file',
    action: '/api/upload',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

//

let [fxlist,setFxlist]=useState({})
//查看客户资料

//得到报修数据
  const getBxList = () => {
    axios.get("/api/getBxList").then((res) => {
      setBxlist([...res.data]);
    });
  };
  //新租租约
  const getZyList = () => {
    axios.get("/api/getZyList").then((res) => {
      setZylist([...res.data]);
    });
  };
  
  const changeqyshow = (e) => {
    setQyshow((qyshow = e));
  };

  let [nav, setNav] = useState(1);
  const changeNav = (e) => {
    setNav((nav = e));
  };
  const zuqinav = [
    {
      title: "楼宇",
      dataIndex: "buildname",
      key: "buildname",
      align: "center",
    },
    {
      title: "楼层",
      align: "center",
      dataIndex: "level",
      key: "level",
      render: (_) => {
        return <span>{_}层</span>;
      },
    },
    {
      title: "租住空间",
      align: "center",
      dataIndex: "space",
      key: "space",
      render: (_) => {
        return <span style={{ color: "#9483FB " }}>{_}</span>;
      },
    },
    {
      title: "租期开始日",
      key: "starttime",
      dataIndex: "starttime",
      align: "center",
    },
    {
      title: "租期结束日",
      key: "endtime",
      dataIndex: "endtime",
      align: "center",
    },
    {
      title: "租住状态",
      align: "center",
      dataIndex: "zzstatus",
      key: "zzstatus",

      render: (status) => {
        return (
          <span
            className={
              status == "租期未开始"
                ? "zqunsatart"
                : status == "租期中"
                ? "green"
                : status == "租期已结束"
                ? "dangerous"
                : ""
            }
          >
            {status}
          </span>
        );
      },
    },
  ];
  const Bxnav = [
    {
      title: "报修人",
      dataIndex: "name",
      key: "name",
      align: "center",
    },
    {
      title: "报修人手机号",
      dataIndex: "phone",
      key: "phone",
      align: "center",
    },
    {
      title: "报修位置",
      dataIndex: "location",
      key: "location",
      align: "center",
    },
    {
      title: "报修类型",
      dataIndex: "style",
      key: "style",
      align: "center",
    },
    {
      title: "具体位置",
      dataIndex: "address",
      key: "address",
      align: "center",
      render: (_) => {
        return (
          <Tooltip title={_} color={"#9483FB "}>
            <span className="wxaddress">{_}</span>
          </Tooltip>
        );
      },
    },
    {
      title: "日期",
      dataIndex: "time",
      key: "time",
      align: "center",
    },
    {
      title: "维修员",
      dataIndex: "repair",
      key: "repair",
      align: "center",
    },
    {
      title: "处理状态",
      dataIndex: "status",
      key: "status",
      align: "center",
      render: (_) => {
        return (
          <span
            className={
              _ == "解决中"
                ? "green"
                : _ == "已解决"
                ? "dangerous"
                : _ == "待解决"
                ? "wxdjj"
                : ""
            }
          >
            {_}
          </span>
        );
      },
    },
  ];
  const Zynav = [
    {
      title: "租约编号",
      dataIndex: "id",
      key: "id",
      align: "center",
      render: (_) => {
        return <span style={{ width: 114, display: "block" }}>{_}</span>;
      },
    },
    {
      title: "租约类型",
      dataIndex: "style",
      key: "style",
      align: "center",
    },
    {
      title: "租赁空间",
      dataIndex: "kongjian",
      key: "kongjian",
      align: "center",
      render: (_) => {
        return <span style={{ width: 108, display: "block" }}>{_}</span>;
      },
    },
    {
      title: "租期",
      dataIndex: "time",
      key: "time",
      align: "center",
      render: (_) => {
        return <span style={{ width: 93, display: "block" }}>{_}</span>;
      },
    },
    {
      title: "租约状态",
      dataIndex: "status",
      key: "status",
      align: "center",
      render: (_) => {
        return (
          <span
            className={
              _ == "执行中"
                ? "green"
                : _ == "已完成"
                ? "dangerous"
                : _ == "已作废"
                ? "gray"
                : ""
            }
          >
            {_}
          </span>
        );
      },
    },
    {
      title: "招商负责人",
      dataIndex: "name",
      key: "name",
      align: "center",
    },
  ];
  const zqchangelist = [
    {
      title: "租约类型",
      dataIndex: "style",
      key: "style",
      align: "center",
    },
    {
      title: "所在楼宇",
      dataIndex: "kongjian",
      key: "kongjian",
      align: "center",
      render: (_) => {
        return <span style={{ width: 108, display: "block" }}>{_}</span>;
      },
    },
    {
      title: "所在楼层",
      align: "center",
      dataIndex: "level",
      key: "level",
      render: (_) => {
        return <span>{_}层</span>;
      },
    },
    {
      title: "空间",
      align: "center",
      dataIndex: "space",
      key: "space",
    },
    {
      title: "开始日期",
      align: "center",
      dataIndex: "starttime",
      key: "starttime",
    },
    {
      title: "结束日期",
      align: "endtime",
      dataIndex: "endtime",
      key: "space",
    },
    {
      title: "数据来源",
      align: "center",
      dataIndex: "listfrom",
      key: "listfrom",
    },
    {
      title: "创建时间",
      align: "center",
      dataIndex: "createtime",
      key: "createtime",
    },
    {
      title: "操作",
      align: "center",
      render: (_) => {
        return (
          <Space>
            <FormOutlined  />
            <DeleteOutlined onClick={()=>{
              delzuyue(_.kid)
              console.log(_.kid);
              
            }} />
          </Space>
        );
      },
    },
  ];
 

  
  



// console.log( 'listf',listf );
  //客户管理抽屉删除
  const delKhlist = (id) => {
    axios
      .get("/api/delKhlist", {
        params: {
          id,
        },
      })
      .then(() => {
        getKhlist();
        message.open({
          type: "success",
          content: "删除成功",
        });
      });
  };
  //新租
  let [nlouyu,setNlouyu]=useState('')
  let [nlc,setNlc]=useState('')
  let [nkj,setNkj]=useState('')
  let [nstime,setNstime]=useState('')
  let [netime,setEtime]=useState('')
  let N=new Date()
//现在时间
let ntime=`${N.getFullYear()}-${N.getMonth()+1}-${N.getDate()}-${N.getHours()}-${N.getMinutes()}`


  //新增租约
  const getnewzu=()=>{

    axios.post('/api/addxinzu',{
      
  buildname:nlouyu,
  level:nlc,
  space:nkj,
  starttime:nstime,
  endtime:netime,
  zzstatus:'租期未开始',
  createtime:ntime
    }).then(()=>{
      getZyList()
      message.open({
        type: 'success',
        content: '添加成功',
       
      });
    })
   }
   //删除租约
   const delzuyue=(id)=>{
    axios.get('/api/delzuyue',{
      params:{
        id:id
      }
    }) .then(() => {
      getZyList()
      message.open({
        type: "success",
        content: "删除成功",
      });
    });
   }
  //发票弹框
  let [fp, setFp] = useState(false);
  let [fpstyle, setFpstyle] = useState("");
  let [fptitle, setFptitle] = useState("");


//编辑客户基础资料                                              
let [skhlx,setSkhlx]=useState('')
let [shy,setsHy]=useState('')
let [srygm,setRygm]=useState('')
//反显到客户资料
useEffect(()=>{
  console.log(222,skhlx,shy,srygm);
  
},[skhlx,shy,srygm])



 const bjjczl=(id)=>{
  axios.post('/api/uploadKhlist',{
    khstyle:skhlx,
hy:shy,
khgm:srygm,
id
  }).then(()=>{
getKhlist()
message.open({
  type: "success",
  content: "修改成功",
});
});
  
 }
//签约弹窗
//联系人弹窗
 let [telzqstyle,setTelzqstyle]=useState('')
 let[zqname,setZqname]=useState('')
 let [glyid,setGlyid]=useState('')
 let[glyemail,setGlyemail]=useState('')
 let [glytel,setGlytel]=useState('')
 

  
  return (
    <>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: "#8479e3",
            colorLinkHover: "#8479e3",
          },
          components: {
            Button: {},
          },
        }}
      >
        
        <div className="kh-box"> 
          <div className="kh-btn">
            <Button
              className="isbtn btn4"
              onClick={() => {
                setnewbol(true);
              }}
            >
              新建客户
            </Button>
            <Button
              className="btn4  isbtn"
              onClick={() => {
                setdrbol(true);
              }}
            >
              批量导入
            </Button>
            <Modal
              width={480}
              open={newbol}
              title="新建客户"
              mask
              onCancel={() => {
                setnewbol(false);
              }}
              onOk={()=>{
             
                addkh()
                setnewbol(false);
              }}
              cancelText='取消'
              okText='提交'
              maskClosable
            >
              <div className="kh-table">
                <div>
                 
                  <Form    layout="vertical" labelCol>
                  <div className="form-new">
                  <p>客户信息</p>
                    <Row >
                      <Col span={12}>
                        <Form.Item
                          label="客户名称"
                      
                          className="from-title"
                          rules={[
                            {
                              required: true,
                              message: "请输入用户名称",
                            },
                          ]}
                        >
                          <Input placeholder='请输入' value={fkhname} onChange={(e)=>{setfkhname(e.target.value)}}  />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item label="客户类型" 
                           className="from-title"
                           rules={[
                            {
                              required: true,
                              message: "请选择用户类型",
                            },
                          ]}
                        name="userkind">
                          <Select
                            placeholder="请输入"
                            style={{ width: 200 }}
                           
                          
                            value={fkhstyle}
                            onChange={(e)=>{setfkhstyle(e)}}
                            options={khlx}
                          />
                        </Form.Item>
                      </Col>

                      <Col span={12}>
                        <Form.Item label="行业"  
                           className="from-title"
                          name="userbusiness">
                          <Select
                            placeholder="请输入"
                            style={{ width: 200 }}
                            value={fkhhy}
                            onChange={(e)=>{setfkhhy(e)}}
                            options={khhy}
                          />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item label="人员规模"  
                          className="from-title" 
                          name="userpeoplenum">
                          <Select
                            placeholder="请输入"
                            style={{ width: 200 }}
                            value={fkhyrgm}
                            onChange={(e)=>{setfkhyrgm(e)}}

                            options={khgm}
                          />
                        </Form.Item>
                      </Col>
                    </Row>
                  </div>
                   <div  className="form-new">
                   <p className="newkh-title">签约联系人</p>
                    <Row >
                      <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="联系人姓名"
                          name="telname"
                        >
                          <Input placeholder='请输入' value={ftelname} onChange={(e)=>{setftelname(e.target.value)}}  />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="联系人职务"
                          name="teljob"
                         
                        >
                          <Input placeholder='请输入' value={ftelzw} onChange={(e)=>{setftelzw(e.target.value)}} />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="联系人手机号"
                          name="telphone"
                         
                        >
                          <Row>
                          <Col span={10}>
                          <Select
                           defaultValue="中国+86"
                            className="phonestyle"
                            style={{ width: 80 }}
                            value={ftelstyle} onChange={(e)=>{setftelstyle(e)}}
                            options={phone}
                          />
                          </Col>
                          <Col span={14}>
                        <Input placeholder='请输入'  style={{ width: 110 }} value={ftelphone} onChange={(e)=>{setftelphone(e.target.value)}}  />
                        </Col>
                          </Row>
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="联系人邮箱"
                          name="telemail"
                         
                        >
                          <Input placeholder='请输入'  value={ftelemail} onChange={(e)=>{setftelemail(e.target.value)}} />
                        </Form.Item>
                      </Col>
                    
                    </Row>
                   </div>
                   <div  className="form-new">
                   <p className="newkh-title">租期管理员</p>
                    <Row >
                      <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="管理员姓名"
                          name="adminname"
                        >
                          <Input placeholder='请输入' value={fglyname} onChange={(e)=>{setfglyname(e.target.value)}} />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="管理员证件号"
                          name="adminID"
                         
                        >
                          <Input placeholder='请输入' value={fglyid} onChange={(e)=>{setfglyid(e.target.value)}} />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="管理员手机号"
                          name="adminphone"
                         
                        >
                          <Row>
                          <Col span={10}>
                          <Select
                           defaultValue="中国+86"
                            className="phonestyle"
                            style={{ width: 80 }}
                            value={fglystyle} onChange={(e)=>{setfglystyle(e)}}
                            options={phone}
                          />
                          </Col>
                          <Col span={14}>
                        <Input placeholder='请输入'  style={{ width: 110 }}  value={fglyphone} onChange={(e)=>{setfglyphone(e.target.value)}} />
                        </Col>
                          </Row>
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="管理员邮箱"
                          
                          name="adminemail"
                         
                        >
                          <Input placeholder='请输入' value={fglyemail} onChange={(e)=>{setfglyemail(e.target.value)}}  />
                        </Form.Item>
                      </Col>
                    
                    </Row>
                   </div>
                  </Form>
                </div>
              </div>
            </Modal>
            <Modal
              open={drbol}
              title="批量导入客户"
              //  onOk={handleOk}
              //  confirmLoading={confirmLoading}
               footer={null}
              onCancel={() => {
                setdrbol(false);
              }}
            >
              <div>
                <div className="dr-box">
                  <div>温馨提示“:</div>
                  <div>根据模板内的“填写须知”填写客户信息后，将模板ExC©上传至此处即可批量导入！</div>
                <Button className="isbtn btn4">下载模板</Button>
                </div>
                <div className="dr-box">
                  <Upload {...upload}>
                    <div className="khupload">
                    <CloudUploadOutlined  style={{fontSize:50,color:'#999999'}} />
                        上传文件
                     
                    </div>
                  </Upload>
                </div>
              </div>
            </Modal>
          </div>
          <div className="kh-search-box">
            <input  type="text" placeholder="请输入客户名称" />
        
              <div className={show? 'khsx':'slsx'}>
                <div>
                  <span className="text">租期状态</span>
                  <div>
                    <Checkbox.Group
                      options={zqList}
                      onChange={(e) => {
                        console.log(e);
                      }}
                    />
                  </div>
                </div>
                <Form>
                  <div>
                    <span className="text">曾驻最大面积</span>
                    <div>
                      <Input />
                      <p>m²</p> <p>~</p>
                      <Input />
                      <p>m²</p>
                    </div>
                  </div>
                  <div>
                    <span className="text">已驻天数</span>
                    <div>
                      <Input />
                      <p>天</p> <p>~</p>
                      <Input />
                      <p>天</p>
                    </div>
                  </div>
                  <div>
                    <span className="text">待驻天数</span>
                    <div>
                      <Input />
                      <p>天</p> <p>~</p>
                      <Input />
                      <p>天</p>
                    </div>
                  </div>
                </Form>
              </div>
           
            <div
              className="sxzk"
              onClick={() => {
                setShow(!show);
              }}
            >
              <div>
                {show ? <UpOutlined /> : <DownOutlined />}
                收起筛选
              </div>
            </div>
            <div>
              <Button className="isbtn btn4">查询</Button>
              <Button className="btn4" disabled>
                重置
              </Button>
            </div>
          </div>
          <div className="kh-table">
            <Table
              scroll={{
                scrollToFirstRowOnChange: true,
                y: 300,
              }}
              columns={columns}
              dataSource={khlist}
              align="center"
            ></Table>
            {/* <Qiyexinxi  khhy={khhy}  khgm={khgm} khlist={khlist} phone={phone}  getKhlist={()=> getKhlist()}  ele={ctlist}    khct={khct}  changekhct={(e)=>changekhct(e)}   khlx={khlx} ></Qiyexinxi> */}
          </div>
        </div>
        <Drawer
        width="720"
        open={khct}
        onClose={() => {
          changekhct(false);
        }}
        style={{ borderRadius: "20px 0 0 20px", padding: "0 6px" }}
        closeIcon={false}
      >
        <div
          className="khctclose"
          onClick={() => {
            changekhct(false);
          }}
        ></div>

        
            <div key={ctlist.id}>
              <div className="ct-title-box">
                <div>
                  <div>
                    {!title ? (
                      <span className="ct-title">{ctlist.name}</span>
                    ) : (
                      <Input
                        value={ctlist.name}
                        onChange={() => {
                          console.log(ele);
                          
                        }}
                        style={{ width: "100%" }}
                      ></Input>
                    )}

                    <FormOutlined
                      onClick={() => {
                        settitle((title = !title));
                      }}
                      style={{ fontSize: 18 }}
                    />
                  </div>
                  <span
                    className="ct-del"
                    onClick={() => {
                      setQyxxdel((qyxxdel = true));
                    }}
                  >
                    删除
                  </span>
                </div>
                <div>
                  <span className="ct-id"> {ctlist.Kid}</span>
                </div>
              </div>
              <div className="ct-nav-box">
                <p
                  className={nav == 1 ? "isnav" : ""}
                  onClick={() => {
                    changeNav(1);
                  }}
                >
                  客户资料
                </p>

                <p
                  className={nav == 2 ? "isnav" : ""}
                  onClick={() => {
                    changeNav(2);
                  }}
                >
                  租约
                </p>

                <p
                  className={nav == 3 ? "isnav" : ""}
                  onClick={() => {
                    changeNav(3);
                  }}
                >
                  租期
                </p>

                <p
                  className={nav == 4 ? "isnav" : ""}
                  onClick={() => {
                    changeNav(4);
                  }}
                >
                  账单
                </p>

                <p
                  className={nav == 5 ? "isnav" : ""}
                  onClick={() => {
                    changeNav(5);
                  }}
                >
                  报修
                </p>

                <p
                  className={nav == 6 ? "isnav" : ""}
                  onClick={() => {
                    changeNav(6);
                  }}
                >
                  访客
                </p>
              </div>
              {nav == 1 && (
                <div className="ct-body-box">
                  <div className="ct-body-one">
                    <div className="ct-body-title">
                      <p className="left">基础资料</p>
                      <p
                        className="right"
                        onClick={() => {
                          
                         
                         console.log(11111,ctlist);
                         
                         setSkhlx( ctlist.khstyle );
                         setsHy( ctlist.hy );
                         setRygm( ctlist.khgm );

                         
                         

                        setJczl(true)
                         
                        }}
                      >
                        编辑
                      </p>
                    </div>
                    <div className="ct-body">
                      <Row>
                        <Col span={12}>
                          <div>
                            <div className="one-title">客户类型</div>
                            <p>{ctlist.khstyle}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">人员规模</div>
                            <p>{ctlist.khgm}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">行业</div>
                            <p>{ctlist.hy}</p>
                          </div>
                        </Col>
                      </Row>
                    </div>
                  </div>
                  <div className="ct-body-one">
                    <div className="ct-body-title">
                      <p className="left">签约联系人</p>
                      <p className="right" onClick={()=>{setQylxr(true)}} >编辑</p>
                    </div>
                    <div className="ct-body">
                      <Row>
                        <Col span={12}>
                          <div>
                            <div className="one-title">姓名</div>
                            <p>{ctlist.telname}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">职务</div>
                            <p>{ctlist.teljob}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">手机号</div>
                            <p>{ctlist.phone}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">邮箱</div>
                            <p>{ctlist.email}</p>
                          </div>
                        </Col>
                      </Row>
                    </div>
                  </div>
                  <div className="ct-body-one">
                    <div className="ct-body-title">
                      <p className="left">租期管理员</p>
                      <p className="right" onClick={()=>{
                        setZqgly(true)
                         setTelzqstyle(ctlist.glystyle)
                         setZqname(ctlist.admin)
                         setGlyid(ctlist.adminID)
                         setGlyemail(ctlist.adminemail)
                         setGlytel(ctlist.admintel)
                         console.log(ctlist);
                         
                       console.log(zqname);
                       console.log(glytel);
                       
                       
                         

                      }} >编辑</p>
                    </div>
                    <div className="ct-body">
                      <Row>
                        <Col span={12}>
                          <div>
                            <div className="one-title">姓名</div>
                            <p>{ctlist.admin}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">证件号</div>
                            <p>{ctlist.adminID}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">邮箱</div>
                            <p>{ctlist.email}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">手机号</div>
                            <p>{ctlist.admintel}</p>
                          </div>
                        </Col>
                      </Row>
                    </div>
                  </div>
                  <div className="ct-body-one">
                    <div className="ct-body-title">
                      <p className="left">发票信息</p>
                      <p
                        className="right"
                        onClick={() => {
                          setFp(true);
                        }}
                      >
                        编辑
                      </p>
                    </div>
                    <div className="ct-body">
                      <Row>
                        <Col span={12}>
                          <div>
                            <div className="one-title">发票类型</div>
                            <p>{ctlist.khstyle}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">纳税人识别号</div>
                            <p>{ctlist.invoiceID}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">发票抬头</div>
                            <p>{ctlist.name}</p>
                          </div>
                        </Col>
                        <Col span={12}>
                          <div>
                            <div className="one-title">电话号码</div>
                            <p>{ctlist.phone}</p>
                          </div>
                        </Col>
                      </Row>
                    </div>
                  </div>
                </div>
              )}
              {nav == 2 && (
                <div className="ct-body-zuqi">
                  <Table dataSource={Zylist} columns={Zynav}></Table>
                </div>
              )}
              {nav == 3 && (
                <div className="ct-body-zuqi">
                  <div className="zuqi-title">
                    <Button
                      type="primary"
                      onClick={() => {
                        setXz(true);
                      }}
                    >
                      +新租
                    </Button>
                    <p
                      onClick={() => {
                        setZqchangect(true);
                      }}
                    >
                      租期变动明细{" "}
                      <RightOutlined
                        style={{
                          fontSize: "12px",
                          fontWeight: "600",
                          marginLeft: "3px",
                        }}
                      />
                    </p>
                  </div>
                  <Table dataSource={Zylist} columns={zuqinav}></Table>
                </div>
              )}
              {nav == 5 && (
                <div className="ct-body-zuqi">
                  <Table dataSource={Bxlist} columns={Bxnav}></Table>
                </div>
              )}
              {nav == 4 && (
                <div className="ct-body-zd">
                  <img
                    src="https://www.helloimg.com/i/2024/11/29/67497dee9d993.png"
                    alt=""
                  />
                  <p>即将上线~</p>
                </div>
              )}
              {nav == 6 && (
                <div className="ct-body-zd">
                  <img
                    src="https://www.helloimg.com/i/2024/11/29/67497dee9d993.png"
                    alt=""
                  />
                  <p>即将上线~</p>
                </div>
              )}
            </div>
          
        

        <Drawer
          open={zqchangect}
          width="720"
          onClose={() => {
            setZqchangect(false);
          }}
          style={{ borderRadius: "20px 0 0 20px", padding: "0 6px" }}
          closeIcon={false}
        >
          <div
            className="khctclose"
            onClick={() => {
              setZqchangect(false);
            }}
          ></div>
          <p>租期变动明细</p>
          <Table columns={zqchangelist} dataSource={Zylist}></Table>
        </Drawer>
      </Drawer>
      <Modal
      open={jczl}
      width={480}
     
      title="编辑基础资料"
      onOk={() => {}}
      footer={
        <Button
          type="primary"
          onClick={() => {
            
            bjjczl(ctlist.id)
           
            
            setJczl(false);
          }}
        >
          保存
        </Button>
      }
      cancelText="取消"
      okText="提交"
      maskClosable
      onCancel={() => {
        setJczl(false);
      }}
      >
        <div className="kh-table1">
        <Form layout="vertical" labelCol >
              <div className="form-new">
            
                <Row>
                  <Col span={12}>
                    <Form.Item
                      label={"客户类型"+skhlx }
                      className="from-title"
                      name="khlx"
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      

                      <Select
                        placeholder="请输入"
                        style={{ width:200 }}
                       
                        defaultValue={skhlx}
                        onChange={(e) => {
                          console.log(e);
                          
                            setSkhlx(e)
                      
                        }}
                        
                      >
                        <Option value="企业">企业</Option>
                        <Option value="个人">个人</Option>
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      label="行业"
                      className="from-title"
                      name="hy"
                      
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      <Select
                        placeholder="请输入"
                        style={{ width:200 }}
                      
                        defaultValue={shy}
                        onChange={(e) => {
                           setsHy(e)
                        }}
                        options={khhy}
                      />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      label={"人员规模"+srygm}
                      className="from-title"
                      name="yrgm"
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      <Select
                        placeholder="请输入"
                        style={{ width:200 }}
                       
                        defaultValue={srygm}
                        onChange={(e) => {
                        setRygm(e)
                      
                       
                        }}
                        options={khgm}
                      />
                    </Form.Item>
                  </Col>
                </Row>
                 </div>
             
             
            </Form>
        </div>
      </Modal>
      <Modal
        onCancel={() => [setQyxxdel((qyxxdel = false))]}
        width={300}
        footer={null}
        open={qyxxdel}
      >
        <div className="jg">确认删除该客户？</div>
        <div className="jg-btn">
          <Button
            onClick={() => {
              delKhlist(ctlist.id);
              setQyxxdel((qyxxdel = false));
              changekhct(false);
            }}
            type="primary"
            style={{ width: "120px", marginRight: "20px" }}
          >
            确定
          </Button>
          <Button
            onClick={() => {
              setQyxxdel((qyxxdel = false));
            }}
            variant="filled"
            style={{ width: "120px" }}
          >
            取消
          </Button>
        </div>
      </Modal>
      {/* 新租 */}
      <Modal
        open={xz}
        width={480}
        title="新租"
        mask
        onOk={() => {}}
        footer={
          <Button
            type="primary"
            onClick={() => {
              getnewzu()
              console.log(netime);
              
              setXz(false);

            }}
          >
            保存
          </Button>
        }
        cancelText="取消"
        okText="提交"
        maskClosable
        onCancel={() => {
          setXz(false);
        }}
      >
        <div className="kh-table">
          <div className="form-new">
            <Row>
              <Col span={12}>
                <Form.Item
                  label="所在楼宇"
                  className="from-title"
                  rules={[
                    {
                      required: true,
                      message: "请选择楼宇",
                    },
                  ]}
                  name="userkind"
                >
                  <Input placeholder="请输入" style={{ width: 200 }} 
                  value={nlouyu} onChange={(e)=>{
                    setNlouyu(e.target.value)
                  }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="所在楼层"
                  name="username"
                  className="from-title"
                  rules={[
                    {
                      required: true,
                      message: "请选择楼层",
                    },
                  ]}
                >
                  <Input placeholder="请输入" style={{ width: 200 }} 
                  value={nlc}
                  onChange={(e)=>{
                    setNlc(e.target.value)
                  }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="所在空间"
                  name="username"
                  className="from-title"
                  rules={[
                    {
                      required: true,
                      message: "请选择空间",
                    },
                  ]}
                >
                  <Input placeholder="请输入" style={{ width: 200 }}
                  value={nkj}
                  onChange={(e)=>{
                    setNkj(e.target.value)
                  }}
                  />
                </Form.Item>
              </Col>

              <Col>
                <div>
                  <div className="xztext">
                    没有所需的空间? &nbsp;立即<span>新建</span>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </div>
        <div className="kh-table">
          <div className="form-new">
            <Row>
              <Col span={12}>
                <Form.Item
                  label="租住结束日期"
                  name="username"
                  className="from-title"
                  rules={[
                    {
                      required: true,
                      message: "请输入租住结束日期",
                    },
                  ]}
                >
                  <DatePicker style={{ width: 200 }} placeholder="请输入" 
                    value={nstime}
                    onChange={(e)=>{
                      let a=`${e.$y}-${e.$M+1}-${e.$D}`
                      setNstime(a)
                      
                    }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="租住开始日期"
                  className="from-title"
                  rules={[
                    {
                      required: true,
                      message: "请选择租住开始日期",
                    },
                  ]}
                  name="userkind"
                >
                  <DatePicker style={{ width: 200 }} placeholder="请输入"
                    value={netime}
                    onChange={(e)=>{
                      let a=`${e.$y}-${e.$M+1}-${e.$D}`
                      setEtime(a)
                     
                      
                      
                      
                      
                    }}
                  />
                </Form.Item>
              </Col>
            </Row>
          </div>
        </div>
      </Modal>
      {/* 签约联系人 */}
      <Modal open={zqgly}  width={480} title="设置租期管理员"
        onOk={() => { setZqgly(false); }}
   
        cancelText="取消"
        okText="确认"
        maskClosable
        onCancel={() => {
          setZqgly(false);
        }}
       >
<div className="kh-table1">
        <Form layout="vertical" labelCol >
              <div className="form-new">
            
                <Row>
                  <Col span={12}>
                    <Form.Item
                      label="管理员姓名"
                      className="from-title"
                      name="khlx"
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      <Input
                        placeholder="请输入"
                        style={{ width:200 }}
                        value={zqname}
                        onChange={(e) => {
                       
                          setZqname(e.target.value);
                        (e)
                        }}
                      />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="联系人手机号"
                          name="telphone"
                          rules={[
                            {
                              required: true,
                            },
                    
                          ]}
                         
                        >
                          <Row>
                          <Col span={10}>
                          <Select
                           defaultValue="中国+86"
                            className="phonestyle"
                            style={{ width: 80 }}
                            value={telzqstyle} onChange={(e)=>{setTelzqstyle(e)}}
                            options={phone}
                          />
                          </Col>
                          <Col span={14}>
                        <Input placeholder='请输入'  style={{ width: 110 }} value={glytel} onChange={(e)=>{setGlytel(e.target.value)}}  />
                        </Col>
                          </Row>
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                    <Form.Item
                      label="联系人邮箱"
                      className="from-title"
                      name="khlx"
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      <Input
                        placeholder="请输入"
                        style={{ width:200 }}
                        value={glyemail}
                        onChange={(e) => {
                       
                          setGlyemail(e.target.value);
                        (e)
                        }}
                     
                      />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      label="证件号"
                      className="from-title"
                      name="khlx"
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      <Input
                        placeholder="请输入"
                        style={{ width:200 }}
                        value={glyid}
                        onChange={(e) => {
                       
                          setGlyid(e.target.value);
                        (e)
                        }}
                        
                      />
                    </Form.Item>
                  </Col>
                   
                </Row>
                 </div>
             
             
            </Form>
        </div>
       </Modal>
      </ConfigProvider>

    
    </>
  );
}
